<html lang="en-gb" dir="ltr" class="uk-touch">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio layout example - UIkit documentation</title>
        <link rel="shortcut icon" href="http://getuikit.net/docs/images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="http://getuikit.net/docs/images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/uikit.docs.min.css">
        <script src="js/jquery.1.9.js"></script>
        <script src="js/uikit.min.js"></script>
        <style type="text/css">
            .showPic{
                width: 256px;
                height: 224px;
            }
        </style>
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
        <div class="uk-grid" style="height:300px;" >
            <div class="uk-width-1-4" style=" background-color: #efb" >
                <a class="uk-thumbnail" href="">
                    <img src="a.jpg" alt="" class="showPic" >
                    <div class="uk-thumbnail-caption">我的空间</div>
                </a><br>
                <button class="uk-button">修改头像</button>
            </div>
            <div class="uk-width-3-4" style=" background-color: #bfe" >
            <legend><h3 style="" >小小飞</h3></legend>
                <form class="uk-form">
                    <fieldset data-uk-margin>
                        <label>修改跟人信息</label>
                        <label>修给密码</label><br>
                        <p>浙江</p>
                        <p>男</p>
                        <textarea style="width:450px;height:72px;" >这个家伙很懒，什么也没留下...</textarea>
                        <button style="height:72px;"  class="uk-button">修改签名</button><br><br>
                        <a href="">关注64人</a><br><br>
                        <a href="">粉丝128人</a>
                        <!-- <label><input type="checkbox"> ...</label> -->
                    </fieldset>

                </form>
            </div>

            
        </div>
        <hr>
            <form class="uk-form">
                    <fieldset data-uk-margin>

                        
                        搜索图片标签：<input type="text" placeholder="">
                        
                        <button class="uk-button">搜索</button>
                        <!-- <label><input type="checkbox"> ...</label> -->
                    </fieldset>

            </form>
            <hr>

        <h2>关注用户照片</h2>
        <div class="uk-grid" >
            
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>




        </div>
        <ul class="uk-pagination">
                <li><a href="">上一页</a></li>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li class="uk-active"><span>2</span></li>
                <li><a href="">下一页</a></li>
        </ul>
          
         
    </div>
     

      

    
</body></html>